import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';
// 导入css文件
import '../../styles/cate/Navigation.css'
// 导入封装请求
import { category_list, category_subcate } from '../../api/cate'

class Navigation extends Component {
    constructor(props) {
        super(props);
        this.state = {
            // 一级分类
            list: [],
            currentIndex: 0,
            // 二级分类
            listOne: [],
        }
    }

    // 获取分类列表数据
    componentDidMount() {
        category_list().then((res) => {
            this.setState({ list: res.data.list })
            // 二级分类列表数据
            category_subcate({ id: res.data.list[0].id }).then((res) => {
                this.setState({ listOne: res.data.subcate.subcategory })
            });
        });
    }

    // 点击获取下标
    handleClick(index) {
        this.setState({
            currentIndex: index
        }, () => {
            // 二级分类列表数据
            category_subcate({ id: this.state.list[this.state.currentIndex].id }).then((res) => {
                // console.log(res.data.subcate);
                this.setState({ listOne: res.data.subcate.subcategory })
            });
        })
    }

    // 去到全部商品页
    togoods(id){
        this.props.history.push({pathname:'/index/allgoods',state:{id}})
    }

    render() {
        return (
            <div className='cate-nav'>
                {/* 一级分类 */}
                <div className="list">
                    {
                        this.state.list.map((item, index) => {
                            return (
                                <div onClick={() => { this.handleClick(index) }} key={index} className={`list-one ${this.state.currentIndex == index ? 'active' : ''}`}>
                                    {item.name}
                                </div>
                            )
                        })
                    }
                </div>
                {/* 二级分类 */}
                <div className='shoplist'>
                    {
                        this.state.listOne.map((item, index) => {
                            return (
                                <div key={index} className='shoplist-one'>
                                    <h3> {item.name}</h3>
                                    <div className='shoplist-two'>
                                        {
                                            item.subNavs.map((a, b) => {
                                                return (
                                                    <div key={b} onClick={(id)=>{this.togoods(a.id)}}>
                                                        <img src={a.pic} alt="" />
                                                        <p>{a.name}</p>
                                                    </div>
                                                )
                                            })
                                        }
                                    </div>
                                </div>
                            )
                        })
                    }
                </div>
            </div>
        );
    }
}

export default withRouter(Navigation);